<template>
	<view v-if="isObjNone(revenue)">
		<view class="start  m-t-20 m-b-30">
			<view class="flex-between">
        <view>
          <image src="@/static/images/index/ic_zichan@2x.png"  style="width:50px;" mode="widthFix"></image>
        </view>
				<view class="m-t-4 font-24 color-a">
          {{select_assets.address}}
          <view class="font-32 color-d m-t-10">
            {{select_assets.province_name}}{{select_assets.city_name}}{{select_assets.district_name}}
          </view>
        </view>
				<view class="font-28 color-b font-weight-500 yyz">运营中</view>
			</view>
		</view>

    <view class="color-a flex font-24 radius-16 flex-center m-30">
      <view class="df fdc row-center text-center radius-16 color-d m-r-142" :class="zyzIndex == 1 ? 'checked' : 'uncheck' " @click="zyzCheckItem(1)">
        <text class="m-t-20 m-b-20 font-25">收益明细</text>
      </view>
      <view class="df fdc row-center text-center radius-16 color-d " :class="zyzIndex == 2 ? 'checked' : 'uncheck' " @click="zyzCheckItem(2)">
        <text class="m-t-20 m-b-20 font-25">签约信息</text>
      </view>
<!--      <view class="df fdc row-center text-center radius-16 color-d " :class="zyzIndex == 3 ? 'checked' : 'uncheck' " @click="zyzCheckItem(3)">-->
<!--        <text class="m-t-20 m-b-20 font-25">装修方案</text>-->
<!--      </view>-->
<!--      <view class="df fdc row-center text-center radius-16 color-d " :class="zyzIndex == 4 ? 'checked' : 'uncheck' " @click="zyzCheckItem(4)">-->
<!--        <text class="m-t-20 m-b-20 font-25">运营方案</text>-->
<!--      </view>-->
    </view>


    <view v-if="zyzIndex == 1">
      <view class="p-l-30 p-r-30 p-b-30">
        <view class="color-a flex font-24 radius-16 flex-between">
          <view :class="clickItem1 ? 'yyzcheck' : 'yyzUncheck'"  @click="checkItem(1)" class="df fdc row-center text-center radius-16 color-c box-shadow" style="width:32%;">

            <view class="yyz-t flex-row flex-center" >
              <view><image src="@/static/images/user/ic_quanbushouru_xuanzhong@2x.png" style="width: 20px;" mode="widthFix"></image></view>
              <view class="m-l-10">全部收入</view>
            </view>
            <text class="font-50 font-weight-500 p-20 yyz-m">
              <text class="font-40">￥</text>
              {{revenue.all_total.toFixed(0)*(select_assets.two_keys+1)}}
            </text>
          </view>

          <view :class="clickItem2 ? 'yyzcheck' : 'yyzUncheck'"  @click="checkItem(2)" class="df fdc row-center text-center radius-16 color-c back-color-b  box-shadow" style="width:32%;">
            <view class="yyz-t flex-row flex-center" >
              <view><image src="@/static/images/user/ic_yunyingchengben_weixuan@2x.png" style="width: 20px;" mode="widthFix"></image></view>
              <view class="m-l-10">运营成本</view>
            </view>
            <text class="font-50 font-weight-500 p-20 yyz-m">
              <text class="font-40">￥</text>{{revenue.pre_month_operate_price.toFixed(0)*(select_assets.two_keys+1)}}
            </text>
          </view>
<!--          <view v-else class="df fdc row-center text-center radius-16 color-d  box-shadow" style="width:32%;" @click="checkItem(2)">
            <text class="m-t-20 m-b-20">运营成本</text>
            <text class="font-56 font-weight-500"><text class="font-50">￥</text>{{revenue.pre_month_operate_price.toFixed(0)*(select_assets.two_keys+1)}}</text>
          </view>-->

          <view :class="clickItem3 ? 'yyzcheck' : 'yyzUncheck'"  @click="checkItem(3)" class="df fdc row-center text-center radius-16 color-c back-color-b  box-shadow" style="width:32%;">
            <view class="yyz-t flex-row flex-center" >
              <view><image src="@/static/images/user/ic_shijishouyi_weixuan@2x.png" style="width: 20px;" mode="widthFix"></image></view>
              <view class="m-l-10">实际收益</view>
            </view>
            <text class="font-50 font-weight-500 p-20 yyz-m">
              <text class="font-40">￥</text>{{(revenue.guarant_income+revenue.dividends_income).toFixed(0)}}</text>
          </view>
        </view>
        <view class="content1" v-if="clickItem1 === true">
          <view class="color-a flex font-24 p-25 radius-16 m-t-30 box-shadow">
            <view class="flex-1 df fdc row-center text-center">
              <text class="font-56 color-d font-weight-500">{{revenue.unit_price.toFixed(2)}}</text>
              <text class="m-t-20">平均客单价(元)</text>
            </view>
            <view class="w-2 h-40 back-color-i"></view>
            <view class="flex-1 df fdc row-center text-center">
              <text class="font-56 color-d font-weight-500">{{revenue.rent_days*(select_assets.two_keys+1)}}/{{dayNum*(select_assets.two_keys+1)}}</text>
              <text class="m-t-20">间夜数(个)</text>

            </view>
            <view class="w-2 h-40 back-color-i"></view>
            <view class="flex-1 df fdc row-center text-center">
              <text class="font-56 color-d font-weight-500">{{(revenue.rent_days/dayNum*100).toFixed(2)}}</text>
              <text class="m-t-20">出租率(%)</text>
            </view>
          </view>
          <view class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">
            <text >其他收入(元)</text>
            <text class="font-56 color-d font-weight-500 float-right">{{revenue.other_income.toFixed(2)}}</text>
          </view>
        </view>
        <view class="content2" v-if="clickItem2 === true">
          <view class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">
            <text >平台扣点(元)</text>
            <text class="font-56 color-d font-weight-500 float-right">{{revenue.points.toFixed(2)*(select_assets.two_keys+1)}}</text>
          </view>

          <view v-if="revenue.water_charge" class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">
            <text >水电费(元)</text>
            <text class="font-56 color-d font-weight-500 float-right">{{revenue.water_charge.toFixed(2)*(select_assets.two_keys+1)}}</text>
          </view>
		  <view v-if="!revenue.water_charge" class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">
		    <text >水费(元)</text>
		    <text class="font-56 color-d font-weight-500 float-right">{{revenue.water_bill.toFixed(2)*(select_assets.two_keys+1)}}</text>
		  </view>
          <view v-if="!revenue.water_charge" class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">
            <text >电费(元)</text>
            <text class="font-56 color-d font-weight-500 float-right">{{revenue.charge_bill.toFixed(2)*(select_assets.two_keys+1)}}</text>
          </view>
          <view class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">
            <text >布草(元)</text>
            <text class="font-56 color-d font-weight-500 float-right">{{revenue.linen_bill.toFixed(2)*(select_assets.two_keys+1)}}</text>
          </view>
          <view class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">
            <text >保洁(元)</text>
            <text class="font-56 color-d font-weight-500 float-right">{{revenue.clean_bill.toFixed(2)*(select_assets.two_keys+1)}}</text>
          </view>
<!--          <view class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">-->
<!--            <text >维修(元)</text>-->
<!--            <text class="font-56 color-d font-weight-500 float-right">{{revenue.repair_bill.toFixed(2)*(select_assets.two_keys+1)}}</text>-->
<!--          </view>-->
          <view class="color-a flex-between font-24 p-25 radius-16 m-t-30 box-shadow">
            <text >客耗品(元)</text>
            <text class="font-56 color-d font-weight-500 float-right">{{revenue.consumables_bill.toFixed(2)*(select_assets.two_keys+1)}}</text>
          </view>
        </view>
        <view class="content3" v-if="clickItem3 === true">
          <view class="color-a flex font-24 p-25 radius-16 m-t-30 box-shadow">
            <view class="flex-1 df fdc row-center text-center">
              <text class="font-56 color-d font-weight-500">{{revenue.guarant_income.toFixed(2)}}</text>
              <text class="m-t-20">保底收益(元)</text>
            </view>
            <view class="flex-1 df fdc row-center text-center">
              <text class="font-56 color-d font-weight-500">{{revenue.dividends_income.toFixed(2)}}</text>
              <text class="m-t-20">分红收益(元)</text>
            </view>
          </view>
        </view>
        <view class="m-t-60 m-b-30 color-d font-30 font-weight-500">数据安全已上区块链</view>
        <view class="flex p-25 radius-16 m-t-30 box-shadow" style="line-height: 18px;font-weight: 400;color:#808080;font-size:12px">
          本资产已通过区块链技术进行认证，确保其安全性和可靠性得到充分保障。区块链作为一种分布式账本技术，具有去中心化、不可篡改、透明可追溯等特点，为资产提供了坚实的信任基础。通过区块链认证的资产，信息和交易记录都会被加密存储在全球范围内的多个节点上，防止任何单一方面的操控和篡改。这为资产的安全性、稳定性和真实性提供了有力保证。<br>
          在这个过程中，每一笔交易都会被记录在区块链上，实现信息的实时同步更新，确保了交易的完整性和透明度。同时，区块链技术还能有效防止双重支付、伪造等欺诈行为，使资产在交易过程中得到充分保障。因此，您可以放心使用这一经过区块链认证的资产，享受安全、便捷的数字化资产管理体验。
        </view>
      </view>
    </view>
    <view v-else-if="zyzIndex == 2">
<!--      <view class="flex-between box-shadow m-30 p-30 radius-20">
        <view style="color:#808080;">签约日期</view>
        <view style="color:#1A1A1A;font-weight: bold;">2024年2月8日</view>
      </view>
      <view class="flex-between box-shadow m-30 p-30 radius-20">
        <view style="color:#808080;">合同金额</view>
        <view style="color:#1A1A1A;font-weight: bold;">¥16000.00</view>
      </view>
      <view class="flex-between box-shadow m-30 p-30 radius-20">
        <view style="color:#808080;">保底月租金</view>
        <view style="color:#1A1A1A;font-weight: bold;">¥5000.00</view>
      </view>
      <view class="flex-between box-shadow m-30 p-30 radius-20">
        <view style="color:#808080;">运营时间</view>
        <view style="color:#1A1A1A;font-weight: bold;">2024年2月8日</view>
      </view>-->
      <view class="flex-between box-shadow m-30 p-30 radius-20">
        <view style="color:#808080;">签约日期</view>
        <view style="color:#1A1A1A;font-weight: bold;">{{asset.sign_time | date('yyyy-mm-dd')}}</view>
      </view>
      <view class="flex-between box-shadow m-30 p-30 radius-20">
        <view style="color:#808080;">合同金额</view>
        <view style="color:#1A1A1A;font-weight: bold;">￥{{ numFormat(asset.total_cost) }}</view>
      </view>
      <view class="flex-between box-shadow m-30 p-30 radius-20">
        <view style="color:#808080;">保底月租金</view>
        <view style="color:#1A1A1A;font-weight: bold;">￥{{ numFormat(asset.guarant_income) }}</view>
      </view>
      <!-- <view class="flex-between box-shadow m-30 p-30 radius-20">
                <view style="color:#808080;">运营开始时间</view>
                <view style="color:#1A1A1A;font-weight: bold;">{{asset.start_time | date('yyyy-mm-dd')}}</view>
              </view>
      <view class="flex-between box-shadow m-30 p-30 radius-20">
                <view style="color:#808080;">运营结束时间</view>
                <view style="color:#1A1A1A;font-weight: bold;">{{asset.end_time | date('yyyy-mm-dd')}}</view>
              </view> -->
    </view>
    <view v-else-if="zyzIndex == 3">
      <pdfView :pdfSrc="asset.decoration_plan"></pdfView>
    </view>
    <view v-else-if="zyzIndex == 4">
      <pdfView2 :pdfSrc="asset.operation_plan"></pdfView2>
    </view>


	</view>
</template>

<script>
	import baseFunction from '@/utils/base.js'
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		name: "assetsDetails",
		data() {
			return {
				show: false,
				videoShow:false,
				videoUrl:'',
				imgShow:false,
				imgUrl:'',
				id: '',
				revenue: {},
				renovationsList:[],
				baseFunction:baseFunction,
				clickItem1:true,
				clickItem2:false,
				clickItem3:false,
        zyzIndex:1,
        expectObj:[],
        asset:[],
			}
		},
		onLoad(ops) {
			if (ops.id) {
				this.id = ops.id
        this.getAssetRenovationsList()
				this.getHousingTotalRevenue()
				uni.setNavigationBarTitle({
				  title: '资产运营中'
				})

			}
		},
		computed: {
			dayNum() {
				let time = new Date()
				let month = time.getMonth() === 0 ? 1 : time.getMonth(),
					year = time.getMonth() === 0 ? time.getFullYear() - 1 : time.getFullYear()
				return new Date(year, month, 0).getDate()
			}
		},
		methods: {
			async getHousingTotalRevenue() {
				const res = await this.$api.common.landlord('getHousingTotalRevenue', {
					time: '',
					assets_id: this.id
				})
				if (res.code === 200) {
					this.revenue = res.data
					if(this.revenue.no_data==1){
						uni.showModal({
							title: '温馨提示',
							content: '上月数据更新中',
							showCancel: false,
						})
					}
				}
			},
			checkItem(n){
				if(n==1){
					this.clickItem1 = true;
					this.clickItem2 = false;
					this.clickItem3 = false;
				}else if(n==2){
					this.clickItem1 = false;
					this.clickItem2 = true;
					this.clickItem3 = false;
				}else{
					this.clickItem1 = false;
					this.clickItem2 = false;
					this.clickItem3 = true;
				}
			},
      async getAssetRenovationsList() {
        const res = await this.$api.common.landlord('getAssetRenovationsList', {
          time: '',
          assets_id: this.id
        })
        if (res.code === 200) {
          for(let i = 0; i<res.data.list.length;i++){
            res.data.list[i]['image_urls'] = baseFunction.js_split(res.data.list[i]['image_url']);
          }
          //console.log(res.data.list);
          this.asset = res.data.asset
          this.renovationsList = res.data.list
          this.expectObj = res.data.expect
        }
      },
      zyzCheckItem(index) {
        this.zyzIndex = index;
      }

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $c;
	}
</style>

<style lang="scss" scoped>
	.start {
		height: 160rpx;
		color: $d;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
    box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.1);
    margin:0 30rpx;
    border-radius: 16rpx;
	}
  .yyz {
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 12px;
    color:#09CDD5;
    background-color: #E6F9FA;
  }
	.color-yellow {
		color:#FF9F22;
	}
  .yyzcheck {
    background: #FB2D19;
    color: #FFFFFF;
  }
  .yyzUncheck {
    background: #FFFFFF;
    color:#000000;
  }
  .yyzcheck .yyz-t {
    padding:10px 20px;
    background: linear-gradient(117deg, #FE515F 0%, #FB2D19 20%, #FB2D19 59%, #FC7916 100%);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    border-radius: 8px;

  }
  .yyzUncheck .yyz-t {
    padding:10px 20px;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    border-radius: 8px;
  }
	.zichan-zx{ display: flex; margin-bottom: 10px;}
	.zichan-sjz{ width: 20%; text-align: center; overflow: hidden;}
	.zichan-line{ width: 0px; min-height: 75px; height: 100%; border: 1px dashed #999999; display: inline-block; margin:10px 0 0 0; border-top: none; border-bottom: none;}
	.zichan-content{ width: 80%;}
	.zichan-box{ background-color:#f5f5f5; padding: 5px 10px; border-radius: 8px; margin-right: 20px; min-height: 90%;}
	.zichan-content-img-box{ display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px;}
	.zichan-content-img{ width: 22%; margin:3px;}
</style>
